<template>
	<scroll-view scroll-y style="height: 100vh;" :enhanced="true" :bounces="false" :show-scrollbar="false">
		<view class="home">
			<g-navbar fontColor="#ffffff" backgroundColor="none" v-if="version ===VERSION_TYPE.OFFICAL_VERSION" />
			<view class="slogan-container">
				交易即可获取现金抽红包积分
			</view>
			<view class="awards-total-container">
				<view class="awards-item integral" @click="jump(JUMP_TYPE.INTEGRAL)">
					<view class="label">
						我的积分
					</view>
					<view class="value">
						<g-auto-zoom-text>{{userInfo?userInfo.score:0}} </g-auto-zoom-text>
						<i class="iconfont icon-arrow-right" />
					</view>
				</view>
				<view class="awards-item bonus" @click="withdrawal(WITHDRAWAL_WAY.RED_PACKET_BALANCE)">
					<view class="label">
						可提现
					</view>
					<view class="value">
						<g-auto-zoom-text>￥{{userInfo?userInfo.red_packet_balance:0.00}} </g-auto-zoom-text>
						<i class="iconfont icon-arrow-right" />
					</view>
				</view>
			</view>
			<luckyDrawPalaceGrid style="position: absolute; top: 594rpx;" @clickBtn="clickBtn"
				@transitionend="transitionend" ref="luckyDrawPalaceGridRef" />
			<view class="award-record" @click="jump(JUMP_TYPE.RECORD)">
				查看我的中奖记录 <i class="iconfont icon-arrow-right" style="font-size: 24rpx;"/>
			</view>

			<winnersList class="winnersList" :luckyDrawHistoryList="luckyDrawHistoryList" />
			<prizePropup ref="prizePropupRef" />
		</view>
		<g-tabbar v-show="version === VERSION_TYPE.EXP_VERSION" />
	</scroll-view>
</template>

<script lang="ts" setup>
	import winnersList from './components/winners-list/winnersList.vue';
	import luckyDrawPalaceGrid from '@/components/lucky_draw_palace_grid/index.vue';
	import prizePropup from './components/prize-popup/prizePropup.vue';
	import { WITHDRAWAL_WAY } from '@/enum/withdrawal';
	import {
		reactive,
		ref, Ref
	} from "vue";
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { useUserData } from '@/hooks/useUserData';
	import { random } from '@/utils';
	import type { IPrizePopupOptions } from './components/prize-popup/types';
	import { BTN_TEXT } from './components/prize-popup/types';
	import interceptor from '@/router/router.interceptor';
	import { VERSION_TYPE } from '@/enum/version';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	import { VIP_STATUS } from '@/enum/vip';
	import { ROUTE_TYPE } from '@/enum/router';

	enum PRIZE_TYPE {
		AMOUNT = 1,
		SCORE = 2,
		NONE = 3,
		PRIZE = 4,
	}


	interface IEarnings {
		amount : number;
		product_id : string;
		product_images : string;
		product_name : string;
		score : string;
	}

	enum JUMP_TYPE {
		WITHDRAWAL = 'widthdrawal',
		INTEGRAL = 'integral',
		RECORD = 'record'
	}

	enum PRIZE_IMAGE {
		AMOUNT = 'https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/8ca81f45-9b8c-4d0d-8a93-64c21c86a003.png',
		SCORE = 'https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/65fa09e5-ee2a-4fb2-aec8-52c517005195.png',
		NONE = 'https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/077d3cd7-ac4d-4591-8e24-105f733969c6.png',
	}

	interface ILuckydrawResult {
		type : PRIZE_TYPE;
		message : string;
		earnings : IEarnings
	}


	const luckyDrawPalaceGridRef : Ref<any> = ref(null);
	const prizePropupRef : Ref<any> = ref(null);

	const store = useStore();



	onLoad(async () => {
		interceptor.beforeEach({ url: '/pages/home/home' })
		await uni.loginManger.$interceptor;
		getLuckyDrawHistoryList();
		if (!store.getters[GET_STORE_USERINFO].redpack_vip || store.getters[GET_STORE_USERINFO].redpack_vip == VIP_STATUS.NORMAL_USER) {
			uni.router.route({
				url: '/pages_vip/vip/vip',
				type: ROUTE_TYPE.REDIRECTTO,
			});
		}
		console.log('已登录，获取用户信息')
	})





	const { getUserInfo } = useUserData();

	const popupOptions : IPrizePopupOptions = reactive({
		title: '',
		desc: '',
		btnText: BTN_TEXT.LOSEPRIZE,
		image: '',
	})

	interface luckyDrawHistoryItem {
		customer : string;
		time : string;
		award : string;
	}

	const luckyDrawHistoryList : Ref<luckyDrawHistoryItem[]> = ref([]);

	const getLuckyDrawHistoryList = async () => {
		const { data } = await uni.http.POST(REST_URL.luckyDrawHistoryList, {
			page: 1,
			page_num: 20,
		})
		console.log('data============>', data);
		luckyDrawHistoryList.value = data.data;
	}



	const clickBtn = async () => {
		//获取抽奖结果
		const result : ILuckydrawResult = (await uni.http.POST(REST_URL.luckyDraw, {
			customer_id: store.getters[GET_STORE_USERINFO].id
		})).data;
		console.log('抽奖结果===》', result)
		//设置抽奖结果弹框
		setPrizeOptions(result);

		//生成随机数
		const randomNumber : number = random(0, 7);
		//开奖
		luckyDrawPalaceGridRef.value.start(randomNumber);
	}

	const setPrizeOptions = (result : ILuckydrawResult) => {
		switch (result.type) {
			case PRIZE_TYPE.AMOUNT:
				popupOptions.title = result.message;
				popupOptions.desc = result.earnings.amount + '余额';
				popupOptions.btnText = BTN_TEXT.WINPRIZE;
				popupOptions.image = PRIZE_IMAGE.AMOUNT;
				luckyDrawPalaceGridRef.value.setPrize(PRIZE_IMAGE.AMOUNT);
				break;
			case PRIZE_TYPE.SCORE:
				popupOptions.title = result.message;
				popupOptions.desc = result.earnings.score + '积分';
				popupOptions.btnText = BTN_TEXT.WINPRIZE;
				popupOptions.image = PRIZE_IMAGE.SCORE;
				luckyDrawPalaceGridRef.value.setPrize(PRIZE_IMAGE.SCORE);
				break;
			case PRIZE_TYPE.NONE:
				popupOptions.title = result.message;
				popupOptions.desc = store.state.userInfo.lotteries_number ? `谢谢参与,您还有${store.state.userInfo.lotteries_number}次抽奖机会` : '谢谢参与';
				popupOptions.btnText = BTN_TEXT.LOSEPRIZE;
				popupOptions.image = PRIZE_IMAGE.NONE;
				luckyDrawPalaceGridRef.value.setPrize(PRIZE_IMAGE.NONE);
				break;
			case PRIZE_TYPE.PRIZE:
				popupOptions.title = result.message;
				popupOptions.desc = result.earnings.product_name;
				popupOptions.btnText = BTN_TEXT.WINPRIZE;
				popupOptions.image = result.earnings.product_images;
				luckyDrawPalaceGridRef.value.setPrize(result.earnings.product_images);
				break;
			default:
				break;
		}
	}

	const transitionend = async () => {
		prizePropupRef.value.open(popupOptions);
		//更新用户信息
		const userInfo = await getUserInfo(store.getters[GET_STORE_USERINFO].id);
		uni.store.local('userInfo', userInfo);
	}

	const jump = (type : JUMP_TYPE) : void => {
		if (type == JUMP_TYPE.WITHDRAWAL) {
			uni.router.route('/pages_withdrawal/withdrawal/withdrawal')
		} else if(type == JUMP_TYPE.INTEGRAL) {
			uni.router.route('/pages_integral/my_integral/myIntegral')
		}else{
			uni.router.route('/pages/award_record/awardRecord')
		}
	}

	const withdrawal = (type : WITHDRAWAL_WAY) => {
		uni.router.route({
			url: '/pages_withdrawal/withdrawal_amount/withdrawalAmount',
			params: {
				type,
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./home.scss";
</style>